<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
</head>
<body>

    <form class="layui-form" action="">
        <input type="hidden" name="classify" id="classify" value="0">
        <!--下拉框-->
        <div class="layui-form-item layui-inline">
            <select name="schooltype">
                <option value="1001">学科</option>
                <option value="1002">学期</option>
                <option value="1003">班次</option>
            </select>
        </div>
        <!--请输入内容-->
        <div class="layui-form-item layui-inline">
            <input type="text" name="schoolname" placeholder="请输入内容" autocomplete="off" class="layui-input" style="width: 300px;border-radius:15px;">
        </div>
        <!--查找-->
        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="formDemo">
                <i class="layui-icon layui-icon-search"></i>查找
            </button>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <!--新增合同-->
        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-radius layui-btn-primary" onclick="addContract()">
                <i class="layui-icon layui-icon-add-1"></i>新增合同
            </button>
        </div>
        <!--刷新-->
        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-radius layui-btn-primary" onclick="refresh()">
                <i class="layui-icon layui-icon-refresh-1"></i>刷新
            </button>
        </div>
    </form>

    <table id="demo" lay-filter="test"></table>

<script src="../../layui/layui.js"></script>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '/school/school/querySchool.do' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'schoolid', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'schooltypename', title: '类型', width:80}
                ,{field: 'schoolname', title: '名称', width:80, sort: true}
                ,{field: 'creationtime', title: '创建日期', width:80}
            ]]
        });

        //监听提交
        form.on('submit(formDemo)', function(data){
            table.reload('demo', {//将id为demo的表格进行重载
                url: '/school/school/querySchool.do'
                , where: {
                    "schooltype": data.field.schooltype//这里type引不引都可以,type为下拉框value
                    , "schoolname": data.field.schoolname//content为文本框值
                } //设定异步数据接口的额外参数
            });
            return false;//阻止表格跳转
        });

    });
</script>
</body>
</html>